<script setup lang="ts">
import { onMounted, ref, shallowRef,computed, onUnmounted } from 'vue'
import logo from './assets/electron.svg'
import * as windowApi from './apis/window'

import { python } from '@codemirror/lang-python'
import { EditorView, basicSetup } from "codemirror"

const tab = ref('option-1')

const editTab = ref('one')

const open = shallowRef(['测试流程','public'])
const files = shallowRef({
  html: 'mdi-language-html5',
  js: 'mdi-nodejs',
  json: 'mdi-code-json',
  md: 'mdi-language-markdown',
  pdf: 'mdi-file-pdf-box',
  png: 'mdi-file-image',
  txt: 'mdi-file-document-outline',
  xls: 'mdi-file-excel',
})

const items = [
  {
    "title": "测试流程",
    "children": [{
    title: '.git',
  },
  {
    title: 'node_modules',
  },
  {
    title: 'public',
    children: [
      {
        title: 'test',
        children: [{
          title: 'logo.png',
          file: 'png',
        }],
      },
      {
        title: 'favicon.ico',
        file: 'png',
      },
      {
        title: 'index.html',
        file: 'html',
      },
    ],
  },
  {
    title: '.gitignore',
    file: 'txt',
  },
  {
    title: 'babel.config.js',
    file: 'js',
  },
  {
    title: 'package.json',
    file: 'json',
  },
  {
    title: 'README.md',
    file: 'md',
  },
  {
    title: 'vue.config.js',
    file: 'js',
  },
  {
    title: 'yarn.lock',
    file: 'txt',
  },]
}
]

const menuItems = [
  {title:"新建文件..."},
  {title:"新建文件..."},
  {title:"新建文件..."},
  {title:"新建文件..."}
]
const activator = ref(false)
const menuTarget = ref("#edit")

const selectFiles = ref([])


const close = () => {
  windowApi.close();
}
const minus = () => {
  windowApi.minimize();
}

const maximize = () => {
  windowApi.maximize();
}

const showContextMenu = (event) => {

  if(event.button === 2) {
    event.preventDefault();
    console.log('监听右键点击')
    activator.value = true
    // 存储点击坐标
    //menuTarget.value = event.target.closest('#edit')
  } else {
    activator.value = false
  }
}

const selectFile = (item) => {
  console.log(2222222 + item)
  if(item) {
   selectFiles.value.push(item);
  }
}

const view = ref()
const viewRef = ref<Element>()

const initCodeView = (code: string) => {
  if (view.value) return // 确保只初始化一次
    // 创建并渲染编辑器视图
    view.value = new EditorView({
      doc: code,
      parent: viewRef.value,  // 将编辑器附加到DOM元素
       extensions: [
        basicSetup,
        python(),
       ]
    })
}

const isMaximized = ref(false)

// isMaximized.value = windowApi.isMaximized();
// window.api.onMaximizedChange((event, ...args) => {
//   isMaximized.value = args[0] 
// })

// onUnmounted(() => {
//   window.api.removeMaximizedListener()
// })

onMounted(() => {
})

const addFlow = () => {

}

const clickOne = () => {
  initCodeView("def f(): \n return 1");
}

</script>
<template>
  <v-app id="inspire">
    <v-app-bar id="title" flat class="border-b-sm" density="compact">
       <!-- <template v-slot:image>
          <v-img gradient="to top right, rgba(19,84,122,.8), rgba(128,208,199,.8)"></v-img>
       </template> -->
      <template v-slot:prepend>
        <v-icon icon="mdi-robot-outline" size="x-large"></v-icon>
      </template>
      <v-app-bar-title>测试流程12321</v-app-bar-title>
      <v-sheet class="d-flex ga-10">
        <v-btn prepend-icon="mdi-video-outline">录制</v-btn>
        <v-btn prepend-icon="mdi-play" primary>运行</v-btn>
        <v-btn prepend-icon="mdi-bug-outline">调试</v-btn>
      </v-sheet>
     
      <v-spacer></v-spacer>
      <v-btn-group variant="text">
        <v-btn icon="mdi-window-minimize" @click="minus"></v-btn>
        <v-btn v-if="isMaximized" icon="mdi-dock-window" @click="maximize"></v-btn>
        <v-btn v-else icon="mdi-window-maximize" @click="maximize"></v-btn>
        <v-btn icon="mdi-window-close" @click="close"></v-btn>
      </v-btn-group>
     
    </v-app-bar>
    <v-navigation-drawer color="grey-lighten-5" permanent width="48">
      <v-tabs  v-model="tab" color="primary" direction="vertical">
        <v-tab value="option-1">
          <v-icon icon="mdi-file-document-multiple"></v-icon>
        </v-tab>
        <v-tab value="option-2">
          <v-icon icon="mdi-account"></v-icon>
        </v-tab>
        <v-tab value="option-3">
          <v-icon icon="mdi-account"></v-icon>
        </v-tab>
        <v-tab value="option-4">
          <v-icon icon="mdi-account" size="large"></v-icon>
        </v-tab>
      </v-tabs>
    </v-navigation-drawer>

    <v-navigation-drawer id="edit" width="256"  permanent color="grey-lighten-5" @mousedown="showContextMenu($event)">
       <v-tabs-window v-model="tab">
        <v-tabs-window-item value="option-1">
            流程
            <v-treeview :opened="open" :items="items"
              density="compact"
              item-value="title"
              activatable
              open-on-click
              color="warning"
              :selected="selectFiles"
              @update:activated="selectFile"
              indent-lines="default"
            >
            <template v-slot:prepend="{ item, isOpen }">
              <v-icon v-if="!item.file" :icon="isOpen ? 'mdi-folder-open' : 'mdi-folder'"></v-icon>
              <v-icon v-else :icon="files[item.file]"></v-icon>
            </template>
            <template v-slot:title="{ item }">
                    <!-- <v-text-field
                      density="compact"
                      :label="item.title"
                      variant="solo"
                      hide-details
                      single-line
                    ></v-text-field> -->
              {{item.title}}
            </template>
            </v-treeview>
            <v-menu
            :model-value="activator"
            :offset="[10, 350]"
            :target="menuTarget"
            location="center"
            scroll-strategy="close">
              <v-list density="compact">
                <v-list-item @click="addFlow">
                  <v-list-item-title>新建流程</v-list-item-title>
                </v-list-item>
                <v-list-item>
                  <v-list-item-title>新建Python</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
        </v-tabs-window-item>
      </v-tabs-window>
    </v-navigation-drawer>
  <v-main style="overflow: scroll;">
   
  <v-card flat>
    <v-tabs density="compact" color="primary" v-model="editTab">
      <v-tab value="one" @click="clickOne">Item One</v-tab>
      <v-tab value="two">Item two</v-tab>
    </v-tabs>
    <v-card-text>
      <v-tabs-window v-model="editTab">
          <v-tabs-window-item value="one">
            <div ref="viewRef">
            </div>
          </v-tabs-window-item>
           <v-tabs-window-item value="two">
            123213 two
          </v-tabs-window-item>
        </v-tabs-window>
    </v-card-text>
      
    </v-card>
    
   
  </v-main>
    <!-- <v-navigation-drawer location="right" width="256" permanent color="grey-lighten-5">
      <v-list>
        <v-list-item prepend-icon="mdi-information"
          v-for="n in 5"
          :key="n"
          :title="`Item ${ n }`"
          link
        ></v-list-item>
      </v-list>
    </v-navigation-drawer> -->
<!-- 
    <v-footer height="72" app>
      <v-text-field
        bg-color="grey-lighten-1"
        class="overflow-hidden"
        density="compact"
        variant="solo-filled"
        flat
        hide-details
      ></v-text-field>
    </v-footer> -->
  </v-app>
</template>
<style lang="css">
#title {
  app-region: drag;
  button {
    app-region: no-drag;
  }
}
</style>
